<template>
    <a-input :placeholder="placeholder" v-model="val" @pressEnter="onPressEnter">
      <a-tooltip slot="suffix" title="查询">
        <a-icon type="search" @click="onPressEnter"/>
      </a-tooltip>
    </a-input>
</template>
<script>
import Vue from 'vue'
import {Input, Icon, Tooltip} from 'ant-design-vue'
Vue.component(Input.name, Input)
Vue.component(Icon.name, Icon)
Vue.component(Tooltip.name, Tooltip)
export default {
  name: 'Search',
  data () {
    return {
      val: undefined
    }
  },
  props: {
    clear: Boolean,
    dvalue: String,
    placeholder: String
  },
  computed: {
  },
  watch: {
    clear: function (val) {
      if (val) this.val = undefined
    },
    dvalue: function (val) {
      this.val = val
    }
  },
  methods: {
    onPressEnter (e) {
      this.$emit('search', this.val)
    }
  }
}
</script>

<style scoped>
  .components-input-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }
  .components-input-presuffix .anticon-close-circle:hover {
    color: #999;
  }
  .components-input-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>
